<template>
  <div>
    <el-form  :model="model" label-width="80px" :rules="rulesForm" ref="dataForm">
                <!-- <el-form-item label="上级部门" prop="parent_id" class="box-Input-mini">
                    <el-cascader @getCheckedNodes="getCheckedNodes" :options="optionTree" :show-all-levels="false"></el-cascader>
                </el-form-item> -->
                <el-form-item label="上级部门" prop="parent_id" v-if="isShow" class="box-Input-mini">
                    <el-input  :value="model.Dname"   placeholder="请选择上级部门" @focus="SelectDem" readonly autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="dept_name" class="box-Input-mini">
                    <el-input v-model="model.dept_name" placeholder="请输入部门名称" clearable autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" class="box-Input-mini" prop="order_num">
                    <el-input-number v-model="model.order_num" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="负责人" class="box-Input-mini">
                    <el-input v-model="model.leader" placeholder="请输入负责人" clearable autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" class="box-Input-mini">
                    <el-input v-model="model.phone" placeholder="请输入联系电话" clearable autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" class="box-Input-mini">
                    <el-input v-model="model.email" placeholder="请输入邮箱" clearable autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门状态" >
                    <el-radio-group v-model="model.status">
                        <el-radio :label="0" >正常</el-radio>
                        <el-radio :label="1">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button  style="padding:10px 25px;margin-right:10px;" size="samll" @click="Closedialog">取 消</el-button>
                
        <el-button style="padding:10px 25px;" size="samll" slot="reference" @click="save" type="primary">提 交</el-button>
    </div>
    <el-dialog class="box-dialog" width="80%" height="350px" :title="title" :visible.sync="dialogFormVisible" @close="closelog" :close-on-click-modal="false" append-to-body>
        <SelectDepartment @SelectChange="SelectChange"/>
    </el-dialog>
  </div>
</template>

<script>
import SelectDepartment from './SelectDepartment.vue';
export default {
    components:{
        SelectDepartment
    },
    props:{
          model:{
              type:Object, //类型
              required:true, //必要性
          },
          isUpdate:{
              type:Boolean, //类型
              required:true, //必要性
          },
          isShow:{
              type:Boolean, //类型
              required:true, //必要性
          },
      },
      data(){
        return{
            newState:0,
            rulesForm:{
                dept_name:[{ required : true, message:'请输入部门名称', trigger:'blur'}],
                parent_id:[{ required : true, message:'选择上级部门', trigger:'change'}],
                order_num:[{ required : true, message:'请输入显示顺序', trigger:'blur'}],
            },
            title:'选择上级部门',
            dialogFormVisible:false //是否显示弹窗
        }
      },
      methods:{
        reset(){
            if(this.$refs.s1)
            {
                this.$refs.dataForm.resetFields();
            }
        },
        SelectChange(e){
           this.model.parent_id=e.dept_id;
           this.model.Dname= e.dept_name;
           console.log(this.model);
           this.dialogFormVisible=false;
        },
        SelectDem(){
            this.dialogFormVisible=true;
        },
        save(){
            this.$refs.dataForm.validate((valid) => {
            if (valid) {
                if(this.isUpdate)
                {
                    console.log(this.model);
                    const loading =this.$loading();
                    this.$http.putForm('/api/DepartmentManage',{model:this.model})
                    .then(res =>{
                        console.log(res);
                         if(res.data.code == 200){
                             this.ShowMsg(res.data.msg,'success');
                             this.$emit('dataBind');
                             this.Closedialog();
                        }
                    })
                    .catch(err =>{
                        this.ShowMsg('服务器异常','error');
                    }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                     })
                    
                }
                else{
                    const loading =this.$loading();
                    this.$http.postForm('/api/DepartmentManage',{model:this.model})
                    .then(res =>{
                        if(res.data.code == 200){
                            this.ShowMsg(res.data.msg,'success');
                                this.$emit('dataBind');
                                this.Closedialog();
                            }
                        })
                    .catch(err =>{
                        this.ShowMsg('服务器异常','error');
                    }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                     })
                
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        Closedialog(){
            this.$emit('Closedialog')
        },
        closelog(){
            this.dialogFormVisible=false;
        }
      }
}
</script>

<style scoped>
.dialog-footer{
    text-align: right;
}
</style>